<script setup lang="ts">

import LeftContent from "@/views/left/leftContent.vue";
import LeftMenu from "@/views/left/leftMenu.vue";
import {computed, ref} from "vue";
import RightContent from "@/views/right/rightContent.vue";

// 当前选中的顶部标签索引
const selectedTopLabelIndex = ref(0);

const topLabels = [
  {
    label: '场景',
    component: 'sceneComponent'
  },
  {
    label: '动画',
    component: 'animationComponent'
  },
  {
    label: '数据',
    component: 'dataComponent'
  },
  {
    label: '状态',
    component: 'stateComponent'
  }
];
// 根据选中顶部标签计算要显示的子菜单项
const currentComponent = computed(() => {
  return topLabels[selectedTopLabelIndex.value]?.component;
});
// 选择顶部标签的方法
const selectTopLabel = (index: number) => {
  selectedTopLabelIndex.value = index;
};
/*const currentComponent = computed(() => {
  if (currentSubItems.value && currentSubItems.value.length > selectedSubItemIndex.value) {
    return currentSubItems.value[selectedSubItemIndex.value].component;
  }
  return 'No Content Available';
});*/
</script>
<template>
  <div class="left-layout">
    <!-- Top buttons -->
    <header class="header">
      <el-button
          v-for="(label, index) in topLabels"
          :key="index"
          @click="selectTopLabel(index)"
          :class="{ 'is-active': selectedTopLabelIndex === index }"
          class="nav-button"
      >
        <span class="span">{{ label.label }}</span>
      </el-button>
    </header>

    <!-- Left menu and content -->
    <div class="content-container">
      <right-content :current-component="currentComponent"/>
    </div>
  </div>
</template>
<style scoped>
.header {
  flex-shrink: 0;
  width: 18vw;
  height: 5vh;
  background-color: #1e2430;
}
.content-container {
  display: flex;
}
:deep .el-button {
  margin-left: 0.8vw !important;
  height: 3.4vh;
  margin-top: 0.75vh;
  background: #5882d6;
  border: none;
  color: #ffffff;
}
</style>